<template>
  <div class="body">
    <div class="searchPart">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="策略搜索：">
          <el-input v-model="input" placeholder="请输入" />
        </el-form-item>

        <el-form-item>
          <el-button
            class="el-icon-search searchBtn"
            @click="searchList"
          >
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- Table部分 -->
    <div class="main">
      <el-button class="el-icon-circle-plus-outline" @click="opeanDialog('add')"> 新建</el-button>
      <el-table
        :data="tacticsList"
        style="width: 100%"
        :header-cell-style="{
          backgroundColor: 'rgb(243, 246, 251)',
          fontWeight: 500,
          padding: '6px 0'
        }"
      >
        <el-table-column
          prop="policyId"
          label="序号"
          width="180"
          type="index"
        />

        <el-table-column
          prop="policyName"
          label="策略名称"
          width="180"
        />
        <el-table-column
          prop="discount"
          label="策略方案"
        />
        <el-table-column
          prop="createTime"
          label="创建日期"
          :formatter="formatDate"
        />
        <el-table-column
          label="操作"
        >
          <template #default="{row}">
            <el-button type="text" @click="getvmListDetail(row)">查看详情</el-button>
            <el-button type="text" @click="opeanDialog($event,row)">修改</el-button>
            <el-button type="text" class="delect" @click="delTacticsList(row.policyId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页部分内容 -->
      <div v-show="pageParams.totalPage>1" class="pageSize">
        <span class="el-pagination__total">  共{{ pageParams.totalCount }}条数据  <span>第{{ pageParams.pageIndex }}/{{ pageParams.totalPage }}页</span></span>
        <div class="right">
          <el-pagination
            layout="prev, next"
            background
            :total="Number(pageParams.totalCount)"
            prev-text="上一页"
            next-text="下一页"
            hide-on-single-page
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <!-- 分页部分内容 -->

    </div>

    <!-- 新增和编辑的弹窗部分 -->
    <Dialog
      ref="dialog"
      :dialog-form-visible.sync="dialogFormVisible"
      :title-info="titleInfo"
      :policy-id="policyId"
      :page-params="pageParams"
      :policy-name="policyName"
      :discount="discount"
    />
    <!-- 新增和编辑的弹窗部分 -->

    <!-- 查看详情的弹窗部分 -->
    <PolicyDialog
      ref="PolicyDialog"
      :detail-dialog-show.sync="detailDialogShow"
      :row="rows"
    />
    <!-- 查看详情的弹窗部分 -->
  </div>
</template>

<script>
import { getTactics, delTactics } from '@/api/aliceRequests'
import Dialog from './components/Dialog'
import PolicyDialog from './components/policyDetail.vue'
export default {
  name: 'DikedeIndex',
  components: { Dialog, PolicyDialog },
  data () {
    return {
      input: '',
      dialogFormVisible: false,
      detailDialogShow: false,
      policyId: 0,
      rows: {},
      policyName: '',
      discount: 0,
      policydetailName: '',
      pageParams: {
        pageIndex: 1,
        pageSize: 10,
        totalCount: 0,
        totalPage: null
      },
      titleInfo: {
        text: '新增',
        pageTitle: '策略'
      },
      tacticsList: [],
      policyDetail: []

    }
  },
  created () {
    this.getTacticsList()
  },
  methods: {
    // 搜索功能
    searchList () {
      if (!this.input) {
        this.getTacticsList()
      } else {
        this.tacticsList = this.tacticsList.filter(item => item.policyName.includes(this.input))
      }
      this.pageParams.pageIndex = 1
    },

    // 获取策略
    async getTacticsList () {
      const data = await getTactics(this.pageParams)
      this.tacticsList = [...data.currentPageRecords]
      this.pageParams.totalCount = data.totalCount
      this.pageParams.totalPage = data.totalPage
      // console.log(data)
    },
    // 删除功能
    async delTacticsList (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          try {
            await delTactics(id)
            this.$message.success('删除成功')
            this.getTacticsList()
          } catch (error) {
            console.log(error)
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 新增和编辑功能
    opeanDialog (type, row) {
      this.dialogFormVisible = true

      if (type === 'add') {
        this.titleInfo.text = '新增'
      } else {
        this.titleInfo.text = '编辑'
        // console.log(row)
        this.policyId = row.policyId
        this.policyName = row.policyName
        this.discount = row.discount
        this.$nextTick(() => {
          this.$refs.dialog.getPolicyDetail()
        })
      }
    },

    // 根据策略搜索售货机
    async getvmListDetail (row) {
      this.rows = row
      this.$nextTick(() => {
        this.$refs.PolicyDialog.getvmGoodsListDetail()
      })
      this.detailDialogShow = true
    },
    // 处理详情页的分页功能
    handleDetailCurrentChange (pageNum) {
      this.policyList.pageIndex = pageNum
      this.getvmListDetail()
    },
    handleDetailSizeChange (pageSize) {
      this.policyList.pageSize = pageSize
      this.policyList.pageIndex = 1
      this.getvmListDetail()
    },

    // 进入某一页
    handleCurrentChange (pageNum) {
      this.pageParams.pageIndex = pageNum
      this.getTacticsList()
    },
    // 每页显示信息条数
    handleSizeChange (pageSize) {
      this.pageParams.pageSize = pageSize
      this.pageParams.pageIndex = 1
      this.getTacticsList()
    },
    // 处理时间格式
    formatDate (row, column) {
      // 获取单元格数据
      const datac = row[column.property]
      return datac.replace('T', ' ')
    }
  }
}

</script>

<style lang="scss" scoped>
::v-deep .btn-prev:disabled {
  background: #edf0f9 !important;
}
::v-deep .btn-next:disabled {
  background: #edf0f9 !important;
}
::v-deep .btn-prev{
 width: 70px;
 height: 32px;
 background-color: #d5ddf8 !important;
}
::v-deep .btn-next{
  margin: 0 20px;
 width: 70px;
 height: 32px;
 background-color: #d5ddf8 !important;
}
::v-deep .el-table {
  td {
    padding: 8px 0;
    border: none;
  }
  &::before {
    height: 0;
  }
}
.body {
  padding: 20px;
  .el-button{
    font-size: 14px;
    font-weight: 500;
    border-radius: 4px;
  }
  .searchPart {
    height: 64px;
    padding: 10px 20px;
    margin-bottom: 20px;
    background-color: #fff;
    .searchBtn {
      background-color: #5f84ff;
      color: #fff;
    }
  }
  .main{
    padding: 20px;
     background-color: #fff;
     .el-icon-circle-plus-outline{
      color: #fff;
      background: linear-gradient(50deg,#ff9743,#ff5e20)!important;
      margin-bottom: 20px;
     }
     .delect{
      color: red;
     }
     .el-table thead {
    color: #666;
    font-weight: 500;
    }
  }
  .pageSize{
    margin: 20px;
    display: flex;
    justify-content: space-between;
    height: 28px;
    line-height: 28px;
    .el-pagination__total{
      flex: 1;
      font-size: 16px!important;
      color: #dbdfe5!important;
    }

  }
}
</style>
